<template>
    <el-container style="height: 100%;">
        <el-aside width="auto" class="aside">
            <el-menu :default-active="$route.path" :collapse="isCollapse" class="el-menu-vertical-demo" :router="true">
                <el-menu-item index="/dashboard" route="/dashboard">
                    <el-icon>
                        <House />
                    </el-icon>
                    <span>首页</span>
                </el-menu-item>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon>
                            <Monitor />
                        </el-icon>
                        <span>系统检查</span>
                    </template>
                    <el-menu-item index="/inspect/system-check" route="/inspect/system-check">检查报告</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header class="header">
                <div class="header-left">
                    <el-icon v-if="isCollapse" @click="isCollapse = false" :size="20">
                        <Expand />
                    </el-icon>
                    <el-icon v-else @click="isCollapse = true" :size="20">
                        <Fold />
                    </el-icon>
                    <el-breadcrumb separator="/" style="display: inline-flex; margin-left: 25px">
                        <el-breadcrumb-item v-for="breadcrumbItem, breadcrumbIndex in breadcrumbList"
                            :key="breadcrumbIndex">
                            <span style="cursor: default;" v-if="breadcrumbItem.path === route.path">
                                {{ breadcrumbItem.meta.title }}
                            </span>
                            <RouterLink :to="{ path: breadcrumbItem.path }" v-else>
                                {{ breadcrumbItem.meta.title }}
                            </RouterLink>
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="setting">
                    <el-popconfirm width="220" :icon="InfoFilled" icon-color="#626AEF" title="确认要退出系统?"
                        @confirm="logout">
                        <template #reference>
                            <div class="logout-btn">
                                <el-icon>
                                    <SwitchButton />
                                </el-icon>
                            </div>
                        </template>
                        <template #actions="{ confirm, cancel }">
                            <el-button size="small" @click="cancel">取消</el-button>
                            <el-button type="danger" size="small" @click="confirm">
                                退出
                            </el-button>
                        </template>
                    </el-popconfirm>
                </div>
            </el-header>
            <el-main style="padding: 0; height: calc(100% - 60px);">
                <RouterView />
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
    Fold,
    Expand,
    Monitor,
    SwitchButton,
    InfoFilled,
    House
} from '@element-plus/icons-vue'

const isCollapse = ref(true)
const route = useRoute()
const router = useRouter()

/**
 * 退出
 */
const logout = () => {
    localStorage.removeItem('access_token')
    localStorage.removeItem('refresh_token')
    router.push({ name: 'Login' })
}

onMounted(() => {
    getBreadcrumbList()
})

// 面包屑
const breadcrumbList = ref([])
const getBreadcrumbList = () => {
    breadcrumbList.value.length = 0
    route.matched.forEach(item => {
        item.meta.title && breadcrumbList.value.push(item)
    })
    if (breadcrumbList.value.length === 0 || breadcrumbList.value[0].name !== 'Dashboard') {
        breadcrumbList.value.unshift({
            path: '/dashboard',
            meta: { title: '首页' }
        })
    }
}
watch(route, () => getBreadcrumbList())
</script>

<style lang="scss" scoped>
.aside {
    --el-menu-bg-color: var(--ss-menu-bg-color);
    --el-menu-active-color: var(--ss-menu-active-color);
    --el-menu-text-color: var(--ss-menu-text-color);
    --el-menu-hover-bg-color: var(--ss-menu-hover-bg-color);
    border-right: 1px solid var(--el-menu-border-color);
    background-color: var(--ss-menu-bg-color);
}

.header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-left {
        display: flex;
        align-items: center;
    }

    .setting {
        display: flex;
        align-items: center;

        .account {
            margin-right: 10px;
            cursor: default;
        }
    }
}

:deep(.el-menu) {
    border-right: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
}

.logout-btn {
    cursor: pointer;
}

.logout-btn :hover {
    color: #F56C6C;
}
</style>